<script setup lang="ts">
import {AreaChart} from "@/components/ui/chart-area";
import {BarChart} from "@/components/ui/chart-bar";

const data = [
  {month: 'Jan', desktop: Math.floor(Math.random() * 2000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Feb', desktop: Math.floor(Math.random() * 2000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Mar', desktop: Math.floor(Math.random() * 2000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Apr', desktop: Math.floor(Math.random() * 2000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'May', desktop: Math.floor(Math.random() * 2000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Jun', desktop: Math.floor(Math.random() * 2000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Jul', desktop: Math.floor(Math.random() * 2000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Aug', desktop: Math.floor(Math.random() * 5000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Sep', desktop: Math.floor(Math.random() * 5000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Oct', desktop: Math.floor(Math.random() * 5000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Nov', desktop: Math.floor(Math.random() * 5000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
  {month: 'Dec', desktop: Math.floor(Math.random() * 5000) + 500, mobile: Math.floor(Math.random() * 2000) + 500},
]

</script>

<template>
  <AreaChart :data="data" index="month" :categories="['desktop', 'mobile']"/>
<!--  <BarChart :data="data" :categories="['desktop', 'mobile']" index="month" :rounded-corners="4"/>-->
</template>

<style scoped>

</style>
